import React, { Component } from 'react'
import { Descriptions } from 'antd';
import Loading from 'components/loading';
export default class LinkDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true
        };
    }

    componentDidMount() {
        const { data = {} } = this.props;
        this.props.getLinkDetails(data.spanId);
        setTimeout(() => {
            this.setState({
                loading: false
            })
        }, 800)
    }

    getDetailsList = (data = []) => {
        let num = 0;
        let arrAy = [];
        for (let key in data) {
            num = num + 1;
            arrAy.push(<div key={key}><span>{num}. {key}：</span>{data[key]}</div>)
        }
        return arrAy;
    }

    render() {
        const { loading = true } = this.state;
        const { data = {}, details = {}, timeFormat } = this.props;
        const { spanName = '' } = details;
        return (
            <div className="link-details">
                {
                    loading ? <Loading /> : <React.Fragment>
                        <div className="ant-descriptions-title">
                            <span>{spanName}</span>
                            <span>持续：{timeFormat(data.itemStartTiem) || '0s'}  开始：{timeFormat(data.itemEndTiem)}</span>
                        </div>
                        <div className="ant-descriptions-view">
                            {this.getDetailsList(details)}
                        </div>
                    </React.Fragment>
                }
            </div>
        )
    }
}
